<template>
  <div class="hidden">
    <vs-sidebar
        absolute
        reduce
        v-model="active"
        open
    >
      <template #logo>
        <!-- ...img logo -->
      </template>
      <vs-sidebar-item v-for="navlist in navdata" v-bind:key="navlist.id" v-bind:id="navlist.name">
        <template #icon>
          <span class="material-icons">
          {{navlist.icon}}
          </span>
        </template>
        {{navlist.name}}
      </vs-sidebar-item>
<!--      <vs-sidebar-group>-->
<!--        <template #header>-->
<!--          <vs-sidebar-item arrow>-->
<!--            <template #icon>-->
<!--              <i class='bx bx-group'></i>-->
<!--            </template>-->
<!--            Social media-->
<!--          </vs-sidebar-item>-->
<!--        </template>-->



      <template #footer>
        <vs-row justify="space-between">
          <vs-avatar badge-color="danger" badge-position="top-right">
            <span class="material-icons">
            unsubscribe
            </span>
            <template #badge>
              28
            </template>
          </vs-avatar>

          <vs-avatar>
            <img src="/avatars/avatar-5.png" alt="">
          </vs-avatar>
        </vs-row>
      </template>
    </vs-sidebar>
  </div>
</template>



<script>
export default {
  name: "Nav",
  props:{
    msg:String,
  },
  data(){
    return{
      // 数据绑定
      active:'home',
      navdata:'',
    }
  },
  methods:{

  },
  // 生命周期函数 获取nav
  async created() {
    var result = await this.$proxy.getNav()
    console.log(result)
    if (result.code === 1){
        this.navdata = result.data
        return false
    }else{
      console.log('获取导航失败');
    }

  }

}
</script>

<style scoped>
.vs-sidebar-content {
  margin-top: 4.8%;
}
</style>